<template>
  <List :grid="{ gutter: 16, column: props.colNum }" :data-source="props.conditionList">
    <template #renderItem="{ item }">
      <ListItem>
        <ListCard
          :page="props.page"
          :type="item"
          :start="start"
          :end="end"
          :step="step"
          :service-name="serviceName"
        />
      </ListItem>
    </template>
  </List>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import {
  List,
  Card,
  Row,
  Col,
  Form,
  FormItem,
  Select,
  SelectOption,
  Button,
  Progress,
} from 'ant-design-vue';
import ListCard from './ListCard.vue';
/* eslint-disable */
export default defineComponent({
  components: {
    Button,
    Row,
    Col,
    Form,
    FormItem,
    Select,
    Card,
    List,
    ListItem: List.Item,
    ListItemMeta: List.Item.Meta,
    Progress,
    SelectOption,
    ListCard,
  },
  props: {
    page: String,
    colNum: Number,
    serviceName: String,
    conditionList: List,
    start: String,
    end: String,
    step: String,
  },
  setup(props, { emit }) {
    console.log('CardGrid 子组件接收参数为：', props);

    const serviceName = ref();
    const start = ref();
    const end = ref();
    const step = ref();

    watch(
      () => [
        props.page,
        props.colNum,
        props.serviceName,
        props.conditionList,
        props.start,
        props.end,
        props.step,
      ],
      (val, prevVal) => {
        console.log('CardGrid 子组件监听父组件值变化 Params：', val);
        serviceName.value = val[2];
        start.value = val[4];
        end.value = val[5];
        step.value = val[6];
      },
      { immediate: true, deep: true }
    );

    return {
      props,
      serviceName,
      start,
      end,
      step,
    };
  },
});
</script>
